<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>摄影社区热门小镇</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            list-style: none;
        }
        .wrap{
            border: 1px solid rgba(0, 0, 0, 0.4);
            width: 800px;
        }
        .list::after{
            content: ".";
            height: 0;
            display: block;
            clear: both;
            visibility: hidden;
        }
        li{
            float: left;
            width: 200px;
            margin-top: 20px;
            margin-bottom: 20px;
        }
        img{
            float: left;
            padding: 2px;
            border: 1px solid rgba(0, 0, 0, 0.4);
            border-radius: 4px;
        }
        .content{
            float: left;
            color: gray;
        }
        .h1{
           font-weight: bolder; 
           color: rgba(0, 0, 0, .7);
           height: 30px;
           line-height: 30px;
           padding-left: 10px;
        }
        .content{
            padding-left: 10px;
        }
        .text{
            font-size: 13px;
            line-height: 20px;
        }
        .st{
            color:cornflowerblue;
            font-weight: bold;
            font-size: 15px;
        }
    </style>
</head>
<body>
    <div class="wrap">
    <p class="h1"> 摄影社区热门小镇</p>
    <ul class="list" style="padding-left: 10px;">
        <li class="photo"><img src="img/pic_01.jpg" alt="">
            <div class="content">
            <p class="text st">风景狙击手</p> 
            <p class="text">成员：80</p> 
            <p class="text">作品：276</p> 
        </div> 
    </li>
        <li class="photo"><img src="img/pic_02.jpg" alt="">
            <div class="content">
                <p class="text st">叙事感</p> 
                <p class="text">成员：235</p> 
                <p class="text">作品：116</p> 
            </div> 
        </li>
        <li class="photo"><img src="img/pic_03.jpg" alt="">
            <div class="content">
                <p class="text st">定焦视界</p> 
                <p class="text">成员：56</p> 
                <p class="text">作品：456</p> 
            </div> 
        </li>
        <li class="photo"><img src="img/pic_04.jpg" alt="">
            <div class="content">
                <p class="text st">中画幅乐园</p> 
                <p class="text">成员：130</p> 
                <p class="text">作品：239</p> 
            </div> 
        </li>
        <li class="photo"><img src="img/pic_05.jpg" alt="">
            <div class="content">
                <p class="text st">《卡啪》先锋...</p> 
                <p class="text">成员：78</p> 
                <p class="text">作品：125</p> 
            </div> 
        </li>
        <li class="photo"><img src="img/pic_06.jpg" alt="">
            <div class="content">
                <p class="text st">植物的无声世界</p> 
                <p class="text">成员：235</p> 
                <p class="text">作品：1258</p> 
            </div> 
        </li>
    </ul>
    </div>
</body>
</html>